<template>
	<!-- 整个页面容器 -->
	<view class="indexContainer">
		<!-- 头部栏 -->
		<view class="header">
			<!-- logo图片 -->
			<image class="logo" src="/static/images/logo.png"></image>
			<view class="search">
				<!-- 搜索图标 -->
				<text class="iconfont icon-sousuo"></text>
				<!-- 在微信小程序中，input框是有placeholder-class属性的，这样就可以对搜索框设置样式了 -->
				<input type="text" placeholder="搜索商品" placeholder-class="placeholder">
			</view>
			<button>随便搜搜</button>
		</view>
		<!-- 导航区域 这就是个可以横向滑动的块 -->
		<scroll-view scroll-x="true" enable-flex class="navScroll" v-if="indexData.kingKongModule">
			<!-- 假数据，模拟占位 -->
			<view class="navItem" :class="{active: navIndex=== -1}" @click="changeNav(-1,0)">推荐</view>
			<view class="navItem" :class="{active: navIndex=== index}" @click="changeNav(index,navObj.L1Id)"
				v-for="(navObj, index) in indexData.kingKongModule.kingKongList" :key="navObj.L1Id">{{navObj.text}}
			</view>
		</scroll-view>
		<!-- 内容区 -->
		<scroll-view scroll-y="true">
			<!-- 推荐组件 -->
			<Recommend v-if="navId===0"></Recommend>
			<!-- 引入catelist -->
			<CateList v-else :navId="navId"></CateList>
		</scroll-view>
	</view>
</template>

<script>
	//引入自己写的组件
	import Recommend from '../../components/recommend/Recommend.vue'
	//引入cateList
	import CateList from '../../components/cateList/CateList.vue'

	//引入vuex里面的东西,一次性全部引入
	import {
		mapState,
		mapMutations,
		mapActions,
		getters
	} from 'vuex'
	export default {
		components: {
			Recommend,
			CateList
		},
		data() {
			return {
				//0.申明一个初始化导航栏数据的变量，并初始化为空对象
				// indexData: {},
				//4.申明被选中的导航栏下标，初始值为 -1，默认指向到推荐
				navIndex: -1,
				navId: 0, //判断导航ID
			};
		},
		//在计算属性里面展开mapState 这种写法的位置在官方这个地方有说明 https://vuex.vuejs.org/zh/guide/state.html#mapstate-辅助函数
		computed: {
			...mapState({
				//在这里将vuex里面的 全局首页数据拿过来
				indexData: state => state.home.indexData
			})
		},
		//钩子函数，页面渲染完成就调用  这里用的是vue里面的生命周期，其实用uni的生命周期也行
		mounted() {
			//在钩子函数里面调用初始化首页数据的方法
			this.$store.dispatch('actionInitIndexData')
			//进行测试，看看是否能拿到全局共享的首页的数据
			// console.log("从state里面取的数据是：",this.indexData)
		},
		methods: {
			/* //初始化首页数据的方法
			async initIndex() {
				//1.从返回的结果中解构出data
				const {
					data
				} = await uni.$axios("/getIndexData")
				// console.log(data) 
				//2.将数据里面的 kingKongModule下的 kingKongList赋值给 data区域的导航栏数据的变量
				this.indexData = data
				//3.打印观察可以发现有一个json串串有点问题，重新补全，给搞成正常的即可
				console.log("导航栏的数据", this.indexData)
			}, */
			//更改选中的导航条目的方法
			changeNav(index, navId) {
				//将对应的索引传入给 navIndex
				this.navIndex = index
				this.navId = navId
				// console.log("传入的navId是",navId);
			}
		}
	}
</script>

<style lang="stylus">
	/* 设置头部栏的样式 upx是uniapp的单位，等同于微信小程序里面的rpx */
	.indexContainer {
		.header {
			display flex;
			padding 10upx 0;

			//图片样式
			.logo {
				width 140upx;
				height 40upx;
				margin 10upx 20upx;
			}

			//搜索框样式
			.search {
				//开启flex布局 
				display flex;
				width 420upx;
				height 60upx;
				background #eee;

				//给新增的图标上个样式
				text {
					line-height 60upx;
					width 60upx;
					text-align center;
				}

				//输入框样式
				.placeholder {
					padding 2upx 0 0 0;
					font-size 30upx;
				}
			}

			//按钮样式
			button {
				width 144upx;
				height 60upx;
				text-align center;
				line-height 60upx;
				font-size 24upx;
				padding 0 4upx;
				margin 0 10upx;
			}
		}
	}

	//横向滚动条的样式
	.navScroll {
		// 设置文本不换行，其他的设置都没用，就这个有用
		white-space nowrap;

		//每一个块
		.navItem {
			//转换为行内块
			display inline-block;
			width 140rpx;
			height 80rpx;
			text-align center;
			line-height 80rpx;
			box-sizing border-box;
			font-size 26rpx;

			//这个写法是父类引用    等同于是.navItem.active
			&.active {
				//选中class="active"的所有class="navItem"的元素 
				border-bottom 1px #007AFF solid; //给他们添加下边线
			}
		}
	}
</style>
